import { transform2px, transformConfig } from '@/utils/customModule';
import utils from '@/utils/index';
import { Image, View } from '@tarojs/components';
import React from 'react';
import { connect } from 'react-redux';
import Marquee from '../Marquee';
import { defaultVisibleEnums } from '../moduleConstants';
import { BorderColors, Colors, NewsColors, StoreHeadStyle } from './constants';
import styles from './index.module.scss';

const styleConfig = {
  wrap: (styleSettingRender, content) => {
    const noticeHeight = content?.notice ? 60 : 0;
    const storeInfoHeight = content?.notice ? 144 : 148;

    let height = transform2px(storeInfoHeight + noticeHeight);

    if (styleSettingRender.style === StoreHeadStyle.one) {
      return {
        height,
        color: Colors[styleSettingRender.colorType],

        backgroundColor: styleSettingRender.backgroundColor,
      };
    }

    return {
      height,
      color: Colors[styleSettingRender.colorType],

      backgroundImage: `url(${content?.imageUrl})`,
      backgroundSize: 'cover',
      backgroundPosition: '50%',
      backgroundRepeat: 'no-repeat',
    };
  },
  mask: (styleSettingRender) => {
    if (
      styleSettingRender.style === StoreHeadStyle.two &&
      styleSettingRender.shadowLayer === defaultVisibleEnums.show
    ) {
      return {
        display: 'block',
      };
    }

    return {
      display: 'none',
    };
  },

  storeInfo: (styleSettingRender, content) => {
    const storeInfoHeight = content?.notice ? 144 : 148;
    const { paddingTop, paddingBottom } = styleSettingRender?.__origin__ ?? {};

    return {
      // 自身内容高度 加 上边距和下边距, 其内容居中
      height: transform2px(storeInfoHeight + (paddingTop ?? 0) + (paddingBottom ?? 0)),
    };
  },
  news: (styleSettingRender) => {
    return {
      borderColor: BorderColors[styleSettingRender.colorType],
      color: NewsColors[styleSettingRender.colorType],
    };
  },
};

const ModuleStoreHead = ({ appConfig, componentCfg: { styleSettingRender, content } = {} }) => {
  const style = transformConfig(styleSettingRender, styleConfig, content);

  return (
    <View className={styles.ModuleStoreHead} style={{ ...style.module, ...style.wrap }}>
      <View className="header-mask" style={style.mask}></View>

      <View className="header-content">
        <View className="store-info" style={style.storeInfo}>
          <Image src={appConfig?.iconUrl} className="logo" />

          <View className="store-name">{appConfig?.name}</View>
        </View>

        {!!content?.notice && (
          <View className="news" style={style.news}>
            <View className="label">公告:</View>

            <Marquee className="value" offset={utils.getSizeByScale(600)}>
              <View>{content?.notice}</View>
            </Marquee>
          </View>
        )}
      </View>
    </View>
  );
};

export default connect(({ otherApi }) => ({
  appConfig: otherApi.appConfig,
}))(ModuleStoreHead);
